<template>

  <el-drawer
    size="500px"
    title="配音设置"
    :append-to-body="true"
    :visible.sync="visible">
<!--  <ele-modal
    width="500px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    title="旁白设置"
    @update:visible="updateVisible"
  >
  </ele-modal>-->

  <el-row class="padding20 flex-wrap">
      <div v-for="(i,j) in nameMap" :key="j">
        <div class="ai-tab" :class="{'ai-tab-active': typeIndex==j }" @click="select(j,i)">{{i}}</div>
      </div>
    </el-row>
    <el-row style="padding: 4px 25px 0">
      <el-radio-group size="small" v-model="form.voice" class="flex-wrap width100" style="display: flex; align-items: center">
        <div v-for="(i,j) in typeList" :key="j" style="margin-bottom: 14px;" :class="typeIndex==4 || typeIndex==5 ? 'w-two' : 'w-three'">
          <el-radio :label="i.voice" class="left-m">{{i.voiceName}}</el-radio>
          <i :class="{'el-icon-video-pause': broadcastIndex==j , 'el-icon-video-play':  broadcastIndex!==j, 'broadcast-active': broadcastIndex == j }" class="broadcast" @click="playAudio(i,j)"></i>
        </div>
      </el-radio-group>
    </el-row>
    <el-row style="padding: 10px 20px 14px;" v-show="form.voice">
      <span style="color: #333; margin-right: 10px">语速设置</span>
      <el-radio-group v-model="form.speechRateId" size="small">
        <el-radio-button label="2">慢</el-radio-button>
        <el-radio-button label="0">正常</el-radio-button>
        <el-radio-button label="1">快</el-radio-button>
      </el-radio-group>
    </el-row>

    <div class="d-fixed">
      <el-button round @click="updateVisible(false)">取消</el-button>
<!--       @click="save"-->
      <el-button type="primary" class="margin20" round :loading="loading" @click="save">保存</el-button>
    </div>
  </el-drawer>

</template>

<script>
  import { aiListAll, loadAiConfigByProjectId, aiConfig } from '@/api/lncomingManagement/cameraManage'
  export default {
    name: "narration",
    props:{
    },
    data(){
      const defaultForm = {
        voice: '', // AI名称
        speechRate: '', // 语速
        charDuration: '', // 单字符时间
        speechRateId: '',
        markDuration: '' // 标点时间
      }
      return{
        defaultForm,
        // 弹窗是否打开
        visible: false,
        // 提交状态
        loading: false,
        broadcastIndex: -1,
        speedRate: 0,
        options: {},
        form: { ...defaultForm },
        aiList: [], // ai分类
        nameMap: {}, // 分类名称
        typeIndex: 0,
        typeList: [], // ai分类筛选
        // 试听
        isPlay: false,
        myAudio: null,
        voice: '',
        typeName:''
      }
    },
    created () {
      this.init()
    },
    mounted () {
      this.myAudio = new Audio()
    },
    methods:{
      show(){
        this.updateVisible(true)
        if(!this.typeName){
          this.select(1,this.nameMap[1]) // 修改，默认选择第一个配音选项
        }
      },
      clear(){
        this.form = { ...this.defaultForm }
        this.select(1,this.nameMap[1]) // 修改，默认选择第一个配音选项
        this.init()
      },
      updateVisible(value){
        this.visible=value
      },
      /* 更新 visible */
      updateVisible222(value) {
        this.$emit('update:visible', value);
      },
      playAudio (i, index) {
        this.broadcastIndex = index
        // 进入不等于
        if (this.voice !== i.voice) {
          this.voice = i.voice
          this.isPlay = true
        } else {
          this.isPlay = !this.isPlay
        }
        this.myAudio.src = i.audioUrl
        if (this.isPlay) {
          this.myAudio.play() // 播放
          this.playEnd()
        } else {
          this.myAudio.pause() // 播放暂停
          this.broadcastIndex = -1
          this.playEnd()
        }
      },
      // 音频播放停止
      playEnd () {
        this.myAudio.addEventListener('ended', () => { // 进入播放完成
          this.isPlay = false
          this.broadcastIndex = -1
        }, false)
      },
      select (j,i) {
        this.typeName=i
        // j 为字符串前面的id
        this.typeIndex = j
        this.typeList = this.aiList[j]
      },
      async init () {
        // 加载剪辑工程Ai配置
         // 需展示 ！！！
        // let configData = await loadAiConfigByProjectId({
        //   projectId: 261
        // })
        // Object.assign(this.form, configData)
        // 获取所有AI
        let data = await aiListAll()
          .catch((e) => {
            this.$message.error(e)
          })
        console.log('获取所有AI配置1111data====data==',data)
        this.nameMap = data ? data.nameMap : {}
        this.typeIndex = Object.keys(this.nameMap)[0]
        this.aiList = data
        // 做数据回显
        for (let key in data) {
          let aiArr = data[key]
          aiArr instanceof Array
            ? aiArr.find(e => e.voice === configData.voice)
            ? this.typeIndex = key
            : void 0
            : void 0
        }
        this.typeList = this.aiList[this.typeIndex]
      },

      // 保存或者修改AI配置
      save () {
        if (!this.form.voice) {
          this.$message.warning('请选择人声')
          return
        }
        if (!this.form.speechRateId && this.form.speechRateId !== 0) {
          this.$message.warning('请选择语速')
          return
        }
        this.loading = true
        //  获取所有AI配置
        aiConfig({
          voice: this.form.voice // AI值:不传递将获取所有AI配置
        })
          .then((data) => {
            let speedList = []
            console.log("获取所有AI配置222data.",data)
            speedList = data.filter(item => {
              return item.speedType === parseInt(this.form.speechRateId)
            })
            console.log('speedList',speedList)
            this.form.speechRate = speedList[0].speedRate
            this.form.speechRateId = speedList[0].speedType
            this.form.charDuration = speedList[0].charDuration
            this.form.markDuration = speedList[0].markDuration
            let voiceName=speedList[0].voiceName // 选择的人声名

            let speedName= this.form.speechRateId==2?'慢': this.form.speechRateId==1?'快' : '正常'
            console.log("typeName,voiceName,speedName",this.typeName,voiceName,speedName)
            let name = this.typeName + '-' + voiceName + '-' + speedName

            this.loading = false
            this.$message.success('保存成功！')
            this.$emit('aiClick',this.form,name)
            this.visible= false
          })
          .catch((e) => {
            this.$message.error(e)
            this.loading = false
          })
      },
    }
  }
</script>

<style scoped lang="less">
  /deep/ .el-input__inner{
    border: 1px solid #313640;
  }
  .ai-tab {
    background-color: #FAFAFC;
    color: #757575;
    margin:0 10px 10px 0;
    padding: 0 15px;
    height: 30px;
    display: inline-block;
    line-height: 30px;
    cursor: pointer;
    text-align: center;
    min-width: 70px;
  }
  .ai-tab:hover {
    /*background: rgba(50,62,78, 0.5);*/
    background: #edf7ff;
    color:#6ca4ff;
    border-radius: 2px;
  }
  .ai-tab-active, .ai-tab-active:hover{
    /*background: rgba(50,62,78, 1);*/
    background: #DDF0FF;
    color:#1E6CEB;
    border-radius: 2px;
  }
  .left-m{
    margin-right: 4px
  }
  .broadcast{
    margin: 0;
    padding: 0;
    font-size: 16px;
    border: none;
    margin-right: 10px;
    cursor: pointer;
    color: #bfbfbf;
    height: 25px;
    width: 25px;
    text-align: center;
    line-height: 25px;
  }
  .broadcast:hover {
    box-shadow: 0 0 10px inset #0066cd;
    border-radius: 5px;
  }
  .broadcast-active{
    box-shadow: 0 0 10px inset #000000;
    border-radius: 5px;
  }
  .w-three{
    width: calc(100% / 3);
  }
  .w-two{
    width: calc(100% / 2);
  }
  .d-fixed{
    position: fixed;
    bottom: 10px;
    right: 10px;
  }
</style>
